import { useState } from "react"

function MyComponent(){

    const [name,setName] = useState("guest");
    const [age,setAge] = useState(0);
    const [employee,setEmployee] = useState(false);

    const updateName = () =>{
        setName("xxx");
    }
    const updateAge = () => {
        setAge(age+1)
    }
    const updateemployee = () =>{
        setEmployee(!employee)
    }

    const changeName = (event)=>{
        setName(event.target.value);
    }
    return (
        <div>
            <input value ={name} onChange={changeName}></input>
            <p/>
            <p> name : {name}</p>
            <button onClick={updateName} > Set Name </button>

            <p> age : {age}</p>
            <button onClick={updateAge} > Set Age </button>

            <p> isEmployee : {employee ? "YES":"NO"}</p>
            <button onClick={updateemployee} > Set employee </button>
            
        </div>
    )
}

export default MyComponent